<template>
	<!-- 供应商\采购方\活动 -->
	<CardComponent :logoColor="data.color" :showImage="false">
		<template #header>
			<!-- 这里是头部内容 -->
			<view class="">
				{{ data.title }}
			</view>
		</template>
		<template #default>
			<view class="supplier">
				<view class="supplier-item" @click="handleClick(0)">
					<view class="supplier-item-row">
						<view class="numStyle supplier-num">
							{{ data.number1 }}
						</view>
						<view class="supplier-unit gray-text">{{ data.unit }}</view>
					</view>
					<view class="gray-text">
						{{ data.status1 }}
					</view>
				</view>
				<view class="supplier-line"></view>
				<view class="supplier-item" @click="handleClick(1)">
					<view class="supplier-item-row">
						<view class="numStyle supplier-num">
							{{ data.number2 }}
						</view>
						<view class="supplier-unit gray-text">{{ data.unit }}</view>
					</view>
					<view class="gray-text">
						{{ data.status2 }}
					</view>
				</view>
			</view>
		</template>
	</CardComponent>
</template>

<script setup>
import CardComponent from '@/components/card/normal';

const props = defineProps({
	data: {
		type: Object,
		required: false
	}
});

const emits = defineEmits(['clicked'])

const handleClick = (index) => {
	emits('clicked', index)
}
</script>

<style scoped lang="scss">
.numStyle {
	color: var(--fui-color-primary);
	font-weight: bold;
}

.gray-text {
	font-size: 24rpx;
	font-weight: 400;
	color: #666666;
}

.supplier {
	display: flex;
	justify-content: space-between;
	margin-top: 30rpx;

	&-line {
		width: 2rpx;
		height: 46rpx;
		background-color: #dbdbdb;
		border-radius: 2rpx;
	}

	&-num {
		font-size: 48rpx;
	}

	&-unit {
		margin-left: 4rpx;
		margin-bottom: 8rpx;
	}

	&-item {
    flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&-row {
			display: flex;
			align-items: flex-end;
			margin-bottom: 2rpx;
		}
	}
}
</style>
